<template>
	<!-- 打印设备标签 -->
	<v-dialog v-model="labelModel.dialog" persistent max-width="1000px">
		<v-card>
			<v-card-title>托盘条码</v-card-title>
			<v-card-text>
				<div class="dayinComment">
					<div ref="print" id="printEquiComment">

						<table class="tab">
							<tbody class="top-tbody">
								<tr>
									<td><img style="width: 200px;height: 80px;" :src="equiModel.qrcode" />
									</td>
								</tr>
							</tbody>
						</table>

					</div>
				</div>

			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<div class="no-print">
					<v-btn color="primary" text @click="printContext">打印</v-btn>
					<v-btn color="primary" text @click="cannel">关闭</v-btn>
				</div>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
	import print from 'print-js'
	export default {
		name: 'ConLabel',
		props: {
			labelModel: {
				dialog: false,
				//零件终检验id
				Id: 0
			},
		},
		data: () => ({
			equiModel: {}
		}),
		watch: {
			labelModel: {
				handler(newVal) {
					this.$emit('update:labelModel', newVal)
					this.loadLabel()
				},
				deep: true
			},
		},
		methods: {
			async loadLabel() {
				if (!this.labelModel.dialog) {
					return
				}

				var response = await this.$httpRequest({
					url: `WMS/WmsBillContainer/GetLabel?id=${this.labelModel.Id}`,
					method: 'get'
				})

				if (response.status == 1) {
					this.equiModel = response.data
				}

			},
			printContext() {
				printJS({
					printable: 'printEquiComment',
					type: 'html',
					targetStyles: ['*'],
					ignoreElements: ['no-print'],
				})
			},
			cannel() {
				this.labelModel.dialog = false
			},
		}
	}
</script>

<style scoped>
	@page {
		size: auto;
		margin: 40px 50px;
	}

	.dayinComment {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;


		@media print {
			text-align: left;
			width: 100%;
			margin: auto;
			page-break-after: always;
			margin-top: 0px;
			font-family: "微软雅黑";


		}


		#printComment {
			text-align: center;

			.content {}

			.btn {}
		}


	}

	.tab {
		width: 215px;
	}

	.tab td {
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
		padding: 0px;
		margin: 0px;
		border-spacing: 1px;
	}
</style>
